<!DOCTYPE html>
<html>
    <head>
        <title>ClipFlair Video Gallery</title>

        <!-- The built PivotViewer script -->
        <script src="seajax/seadragon-pivot-standalone-min.js"></script>

        <style>
            html {
                font-family:sans-serif;
                font-size:0.875em;
            }
            html, body {
                height: 100%;
                position: relative;
                margin: 0;
            }
            #theviewer {
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                border: 2px solid gray;
            }
        </style>

        <!--The styles that make everything inside the Pivot view shiny-->
        <link rel="stylesheet" type="text/css" href="seajax/css/PivotView.css"/>
    </head>
    <body>
        <!--All the developer using this control must do is create a div with the proper
            class and data attribute, and it will be initialized automatically. There are
            also Javascript APIs for those who need more control.-->
        <div id="theviewer" class="pivot_ajax_viewer" data-collection="collection/video.cxml" data-use-hash="true"></div>
    </body> <!-- http://gallery.clipflair.net/collection/video.cxml -->
</html>